<template>
	<div class="body">
		<!-- 头部 -->
		<div class="header">
			<router-link to="/home" class="index">
				
			</router-link>
			<h2>
				我的驴妈妈
			</h2>
			<a href="">
				<img src="static/mylvmamaimg/header-options.png">
			</a>
		</div>
		<!-- 登录 -->
		<div class="banner">
			<router-link to="/login">
				<span class="lv"></span>
				<span>你还未登录,点击登录</span>
			</router-link>
		</div>
		<!-- 订单 -->
		<div>
			<a htef="" class="dingdan margin_top">
				<p>全部订单</p>
				<p>查看所有订单<span></span></p>
			</a>
		</div>
		<!-- 菜单 -->
		<div class="menu margin_top">
			<div>
				<a href="">
					<img src="static/mylvmamaimg/my_electicket.png">
					<p>电子券</p>
				</a>
			</div>
			<div>
				<a href="">
					<img src="static/mylvmamaimg/my_quan.png">
					<p>优惠券</p>
				</a>
			</div>
			<div>
				<a href="">
					<img src="static/mylvmamaimg/my_wallet.png">
					<p>钱包</p>
				</a>
			</div>
			<div>
				<a href="">
					<img src="static/mylvmamaimg/my_jifen.png">
					<p>积分</p>
				</a>
			</div>
			<div>
				<a href="">
					<img src="static/mylvmamaimg/my_ious.png">
					<p>小驴白条</p>
				</a>
			</div>
		</div>
		<!-- 会员 -->
		<div class="vip margin_top">
			<a href="">
				<i></i>会员俱乐部<span></span>
			</a>
		</div>

		<div class="vip margin_top">
			<a href="" class="border">
				<i class="xinxi"></i>常用信息<span></span>
			</a>
			<a href="" class="border">
				<i class="shoucang"></i>我的收藏<span></span>
			</a>
			<a href="">
				<i class="youji"></i>我的游记<span></span>
			</a>
		</div>
		<div class="vip margin_top margin_bottom">
			<a href="" class="border">
				<i class="guanyu"></i>关于驴妈妈<span></span>
			</a>
			<a href="" class="border">
				<i class="dianhua"></i>客服电话<span></span>
			</a>
			<a href="" class="border">
				<i class="wenjuan"></i>参与有奖问券<span></span>
			</a>
			<a href="">
				<i class="jiameng"></i>供应商加盟合作<span></span>
			</a>
		</div>
	</div>

</template>

<script>
	export default{
		data(){
			return{

			}
		},
		mounted(){
			document.body.scrollTop=0;
		}
	}
</script>

<style scoped>
.body{
	background: #efeff7;
	overflow-x: hidden;
}
.header{
	display: flex;
	flex-flow: nowrap;
	justify-content: space-between;
	align-items: center;
	padding: 0 .3rem;
	background: #fafafa;
	font-size: .35rem;
	
}
.header h2{
	font-weight: normal;
}
.index{
	width: 1rem;
	height: 1rem;
	background: url(../../../static/mylvmamaimg/img.png)no-repeat;
	background-position: -5.6rem -9.2rem;
	background-size: 13rem;
}
.banner{
	background: url(../../../static/mylvmamaimg/index_star.png)no-repeat left top;
	background-size: 100%;
	padding-bottom: 42.4%;
	font-size: .35rem;
	position: relative;
}

.banner a{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: absolute;
	top: 30%;
	left: .6rem;
	color: #fff;
}
.banner .lv{
	width: 2rem;
	height: 2rem;
	background: url(../../../static/mylvmamaimg/my_lv.png)no-repeat center;
	background-size: 2rem;
	border-radius: 50%;
}
.banner span{
	padding: .2rem;
}
.margin_top{
	margin-top: 0.266667rem;
	background: #fff;
}
.dingdan{
	padding: .3rem .5rem;
	font-size: .4rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}
.dingdan p span::after{
	position: absolute;
	right: .3rem;
	top: 50%;
	width: 0.213333rem;
	height: 0.213333rem;
	-webkit-transform: translateY(-50%) rotate(45deg);
	transform: translateY(-50%) rotate(45deg);
	content: "";
	border-top: 2px solid #666;
	border-right: 2px solid #666;
}
.menu{
	height: 2.133333rem;
	display: flex;
	justify-content: space-around;
	font-size: .35rem;
	text-align: center;
}
.menu div{
	width: 25%;
}
.menu img{
	width: 30%;
	margin: 0.533333rem auto 0.32rem auto;
}
.vip{
	padding: 0 0rem 0 .4rem;
	display: flex;
	flex-flow: wrap column;
	align-items: center;
	justify-content: center;

}
.vip a{
	font-size: .4rem;
	padding: 0 0rem 0 1rem;
	position: relative;
	width: 93%;
	height: 1.2rem;
	display: flex;
	align-items: center;
}
.vip i{
	background: url(../../../static/mylvmamaimg/vip-memeber.png)no-repeat center;
	background-size: 70%;
	display: inline-block;
	width: 0.65rem;
	height: 0.65rem;
	vertical-align: middle;
	position: absolute;
	left: 0rem;
	top: .28rem;
}
.vip span::after{
	position: absolute;
	right: .5rem;
	top: 50%;
	width: 0.213333rem;
	height: 0.213333rem;
	-webkit-transform: translateY(-50%) rotate(45deg);
	transform: translateY(-50%) rotate(45deg);
	content: "";
	border-top: 2px solid #666;
	border-right: 2px solid #666;
}
.border{
	border-bottom: 2px solid #dddddd;
}
.vip .xinxi{
	background: url(../../../static/mylvmamaimg/my_icon.png)no-repeat center .2rem;
	background-size: 70%;
}
.vip .shoucang{
	background: url(../../../static/mylvmamaimg/my_icon.png)no-repeat center -1.022222rem;
	background-size: 80%;
}
.vip .youji{
	background: url(../../../static/mylvmamaimg/my_tour.png)no-repeat;
	background-size: 70%;
	left: .1rem;
	top: .28rem;
}
.vip .guanyu{
	background: url(../../../static/mylvmamaimg/my_icon.png)no-repeat center -1.6rem;
	background-size: 80%;
}
.vip .dianhua{
	background: url(../../../static/mylvmamaimg/my_icon.png)no-repeat center bottom;
	background-size: 80%;
}
.vip .wenjuan{
	background: url(../../../static/mylvmamaimg/wenjuan.png)no-repeat;
	background-size: 100%;
}
.vip .jiameng{
	background: url(../../../static/mylvmamaimg/supplier.png)no-repeat;
	background-size: 80%;
	left: .1rem;
	top: .36rem;
}
.margin_bottom{
	margin-bottom: 0.266667rem;
}
</style>